{{define "qrcodeModal"}}
<style>
.qr-container {
  display: flex;
  justify-content: center; /* 在水平方向上居中 */
}
.qr-bg {
  width: 300px; 
  height: 300px;
} 
.qr-modal-header {
  display: flex;
  justify-content: center; /* 在水平方向上居中 */
  text-align: center; /* 文字居中 */
}
</style>

<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
    :dialog-style="{ top: '60px' }"
    :closable="true"
    :class="themeSwitcher.currentTheme"
    :footer="null" width="360px">
  <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
    {{ i18n "pages.inbounds.clickOnQRcode" }}
  </a-tag>
  <template v-if="app.subSettings.enable && qrModal.subId">
    <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider>
    <div class="qr-container">
      <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas></div>
    </div>
    <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider>
    <div class="qr-container">
      <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas></div>
    </div>
  </template>
  <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
  <template v-for="(row, index) in qrModal.qrcodes">
    <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
    <div class="qr-container">
      <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas></div>
    </div>
  </template>
</a-modal>

<script>

const qrModal = {
    title: '',
    dbInbound: new DBInbound(),
    client: null,
    qrcodes: [],
    clipboard: null,
    visible: false,
    subId: '',
    show: function (title = '', dbInbound, client) {
        this.title = title;
        this.dbInbound = dbInbound;
        this.inbound = dbInbound.toInbound();
        this.client = client;
        this.subId = '';
        this.qrcodes = [];
        if (this.inbound.protocol == Protocols.WIREGUARD){
            this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l,index) =>{
                this.qrcodes.push({
                    remark: "Peer " + (index+1),
                    link: l
                });
            });
        } else {
            this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
                this.qrcodes.push({
                    remark: l.remark,
                    link: l.link
                });
            });
        }
        this.visible = true;
    },
    close: function () {
        this.visible = false;
    },
};

const qrModalApp = new Vue({
    delimiters: ['[[', ']]'],
    el: '#qrcode-modal',
    data: {
        qrModal: qrModal,
    },
    methods: {
      copyToClipboard(elementId, content) {
        this.qrModal.clipboard = new ClipboardJS('#' + elementId, {
          text: () => content,
        });
        this.qrModal.clipboard.on('success', () => {
          app.$message.success('{{ i18n "copied" }}')
          this.qrModal.clipboard.destroy();
        });
      },
      setQrCode(elementId, content) {
        new QRious({
          element: document.querySelector('#' + elementId),
          size: 500,
          value: content,
          background: 'white',
          backgroundAlpha: 0,
          foreground: 'black',
          padding: 4,
          level: 'L'
        });
      },
      genSubLink(subID) {
        return app.subSettings.subURI + subID;
      },
      genSubJsonLink(subID) {
        return app.subSettings.subJsonURI + subID;
      },
      revertOverflow() {
        const elements = document.querySelectorAll(".qr-tag");
        elements.forEach((element) => {
          element.classList.remove("tr-marquee");
          element.children[0].style.animation = '';
          while (element.children.length > 1) {
            element.removeChild(element.lastChild);
          }
        });
      }
    },
    updated() {
        if (qrModal.client && qrModal.client.subId) {
            qrModal.subId = qrModal.client.subId;
            this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
            this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
        }
        qrModal.qrcodes.forEach((element, index) => {
            this.setQrCode("qrCode-" + index, element.link);
        });
    }
});

</script>
{{end}}
